<template>
    <div class="careful">
        <div class="careful-head">
            <p class="careful-head-line" />
            <p class="careful-head-title">
                注意事项
            </p>
        </div>
        <div class="careful-wrap">
            <div class="careful-wrap-left">
                <div class="careful-wrap-list">
                    <p class="careful-wrap-list-index">
                        {{ data[0] }}
                        <span style="color:#FF3030">
                            {{ data[1] }}
                        </span>
                    </p>
                </div>
                <div class="careful-wrap-list">
                    <p class="careful-wrap-list-index">
                        {{ data[2] }}
                        <span style="color:#FF3030">
                            {{ data[3] }}
                        </span>
                    </p>
                </div>
                <div class="careful-wrap-list">
                    <p class="careful-wrap-list-index">
                        {{ data[4] }}
                    </p>
                </div>
            </div>
            <div class="careful-wrap-right">
                <div class="careful-wrap-list">
                    <p class="careful-wrap-list-index">
                        {{ data[5] }}
                        <span style="color:#FF3030">
                            {{ data[6] }}
                        </span>
                    </p>
                </div>
                <div class="careful-wrap-list">
                    <p class="careful-wrap-list-index">
                        {{ data[7] }}
                        <span style="color:#FF3030">
                            {{ data[8] }}
                        </span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'BeCareful',
    data () {
        return {
            data: [
                '①  此处设置的是您的微信和支付宝的收款账户，由于掌上大学APP商城支持两种付款方式，',
                '所以支付宝账号和微信账号都需要进行设置',
                '②  按照支付宝和微信官方的要求，设置的流程有多步，并非一次性可以设置完成。每一步的结果我们都将会通过您设置的财务手机',
                '号短信通知给您，请您注意查收并及回到该页面，进行账户下一步的处理',
                '③  金额到账后提现的手续费，为支付宝和微信的官方手续费，与掌上大学无关',
                '④   一旦同学们在掌上大学购买您店铺的商品，并通过支付宝或微信支付成功，该笔金额将会直接到达您以下设置的对应收款账户。但是，由于存在“钱在货前”的情况，我们将会向支付宝和微信申请冻结该笔金额的到账进程，',
                '在买家确认收货的7天后（第8天）再将该笔金额的到账进程解冻，到时候该金额才会到账。',
                '⑤',
                '我们对买家支付的金额，仅保有在支付宝和微信支付的监控下，进行冻结到账和解冻到账的权利，不再有如提现、转账等其他的操作权利'
            ]
        };
    }
};
</script>

<style lang="less" scoped>
.careful {
    margin-left: 24px;
    margin-right: 24px;
    background-color: #FBFBFB;
    border-radius: 2px;
    margin-top: 32px;
    border:1px solid rgba(238,238,238,1);
    &-head {
        width: 100%;
        height: 16px;
        display: flex;
        align-items: center;
        padding-left: 21px;
        margin: 24px 0 32px 0;
        &-line {
            width:8px;
            height:16px;
            background:rgba(240,161,46,1);
        }
        &-title {
            color: #333333;
            font-size: 16px;
            font-weight: 500;
            margin-left: 16px;
        }
    }
    &-wrap {
        width: 100%;
        display: flex;
        align-items: center;
        &-left, &-right {
            display: flex;
            flex-direction: column;
            width: calc((100% - 48px)/2);
            box-sizing: border-box;
            height: 295px;
        }
        &-left {
            margin-right: 48px;
            padding-left: 45px;
            .careful-wrap-list {
                display: flex;
                margin-bottom: 24px;
                width: 415px;
                &-index {
                    width: 415px;
                    font-size: 14px;
                    color: #666666;
                    line-height: 26px;
                    text-indent: -15px;
                    box-sizing: border-box;
                    letter-spacing: 0;
                }
            }
        }
        &-right {
            .careful-wrap-list {
                display: flex;
                margin-bottom: 24px;
                width: 415px;
                &-index {
                    width: 415px;
                    font-size: 14px;
                    color: #666666;
                    line-height: 26px;
                    text-indent: -15px;
                    box-sizing: border-box;
                    letter-spacing: 0;
                }
            }
        }
    }
}
</style>